<template>
  <h2>个人信息</h2>
  <el-divider />
  <div class="flex justify-between">
    <el-form
      :model="form"
      label-width="auto"
      ref="personFormRef"
      :rules="personRules"
      style="max-width: 600px"
    >
      <el-form-item label="用户名" prop="name">
        <el-input
          v-model="form.name"
          maxlength="20"
          show-word-limit
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="个人主页" prop="homePage">
        <el-input
          v-model="form.homePage"
          maxlength="100"
          show-word-limit
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="个人介绍" prop="introduce">
        <el-input
          v-model="form.introduce"
          maxlength="100"
          show-word-limit
          style="width: 300px"
          type="textarea"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitSave(personFormRef)"
          >保存修改</el-button
        >
      </el-form-item>
    </el-form>

    <avtar />
  </div>
</template>

<script setup>
import avtar from "./avtar.vue";
const form = reactive({
  name: "",
  homePage: "",
  introduce: "",
});

const personFormRef = ref();
const personRules = {
  name: [{ required: true, message: "昵称", trigger: "blur" }],
};
const submitSave = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      ElMessage({
        message: "保存修改成功",
        type: "success",
      });
    } else {
      return false;
    }
  });
};
</script>

<style scoped lang="scss"></style>
